<template>
<section id="print">
  <el-dialog custom-class="dia-class" :visible.sync="visibleP" :before-close="handleClose" center="">
    <header slot="title" class="headerTitle">
      <span class="title">
        {{getTitle}}
      </span>
    </header>
    <section class="section">
      <ul>
        <li>
          <span>法人代码: <em>{{this.detailsP.corpCode}}</em></span>
        </li>
        <li>
          <span>进货验收单日期: <em>{{this.detailsP.confirmDate}}</em></span>
        </li>
      </ul>
    </section>
    <section class="section">
      <table class="tableList" border="1">
        <thead>
          <tr>
            <th>进货项次</th>
            <th>订单号</th>
            <th>订单项次</th>
            <th>约定交货日期</th>
            <th>类型</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for = "(item,index) in this.detailsP.poDetail" :key="index">
            <td>{{item.grnItem}}</td>
            <td>{{item.poNumber}}</td>
            <td>{{item.poItem}}</td>
            <td>{{item.deliveryDate}}</td>
            <td>{{item.dataName}}</td>
          </tr>
        </tbody>
      </table>
    </section>
    <section class="section">
      <ul class="height-auto" style="display:flex">
        <span style="width:80px;">附件:</span>
        <div class="a-link-group inline-block" style="background:#ECECEC;flex:1;height:80px;max-height:80px;overflow-y:auto;">
            <a v-for="(item, index) in filelist" ref="fileBtn" :key="index" href="http://" @click.prevent="downLoadFile(item.fileDownLoadUrl)">{{item.fileName}}</a>
          </div>
      </ul>
      <ul style="display:flex">
        <span style="width:80px;"></span>
        <div class="a-link-group inline-block" style="flex:1;">
            <el-button type="primary" class="searchBtn" size="small" @click="handleClose">确认</el-button>
          </div>
      </ul>
    </section>
    <!-- <footer class="no-print" slot="footer" :style="'clear:both'">
      <el-button type="primary" class="searchBtn" size="small" @click="handleClose">确认</el-button>
    </footer> -->
  </el-dialog>
</section>
</template>

<style scoped lang="scss">
@import "@/assets/css/_dialog.scss";
@import "@/assets/css/_newUI.scss";
section{
  > ul,>ul:last-of-type{
    border: none;
  }
  > ul > li:not(:first-of-type) {
    border-left: none;
  }
  li{
    width: 68%;
  }
  li+li{
    width: 30%;
  }
}
.tableList{
  width: 100%;
  border-collapse: collapse;
  border:1px solid #E4E4E4;
  margin:20px 0;
  thead tr{
    height: 30px;
    th{
      font-weight: normal;
      background:#3F97F8;
      color:#fff;
    }
  }
  tbody tr{
    height: 30px;
    text-align: center;
    &:last-child{
      border-bottom: none;
      td{
        border-bottom: none;
      }
    }
  }
}
ul:last-child{
  height: auto;
  border-top: none;
  span{
    padding-left: 0;
    line-height: 45px;
  }
}
</style>

<script>
import DialogClose from '@/mixins/suplier/Ar/DialogClose'
import {
  baseUrl
} from '@/config/env.js'
export default {
  props: ['visibleP', 'detailsP', 'filelist'],
  mixins: [DialogClose],
  computed: {
    getTitle () {
      return '进货验收单' + this.detailsP.grnNumber
    }
  },
  methods: {
    // 文件下载
    downLoadFile (fileDownLoadUrl) {
      var newWindow = window.open()
      this.axios.post('/commonFile/showFileByUrl.do', {fileUrl: fileDownLoadUrl}).then(res => {
        if (res.data.status) {
          newWindow.location = `${baseUrl}${res.data.data.fileName}`
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
